<template> 
<div>
  <page-layout > 
    <!--------------右上角按钮----------------->
    <a-card      style="margin-top: 24px"      :bordered="false"      title="工程规划"    >        
      <div slot="extra"> 
            <a-button type="primary" @click="n_showModal">
                  新增
                </a-button>
                <a-modal  :key=2
                  title="新增"
                  :width=1200
                  :visible="n_visible" 
                  @ok="n_handleOk"
                  @cancel="n_handleCancel"
                > 
                    // 新建工程，提示：新建成功，请尽快制定工程阶段！  后面有一个制定工程规划的按钮
                    <a-modal 
                          :dialog-style="{ top: '20px' }"
                          :visible="newprojectmodal1Visible"
                          @ok="() => setModal1Visible(false)"
                          @cancel="() => setModal1Visible(false)"
                        > 
                          <p>新建成功，请尽快制定工程阶段!</p>
                          <p>  <a-button type="primary" >制定工程规划</a-button></p>
                        </a-modal>






                  <p>基本信息</p>  
                 <a-form layout="horizontal"> 
                     <a-form :colon="false">
                        <a-row :gutter="24"><!------------第1行---------------->
                          <a-col :span="8"><!------------第一列---------------->
                            <a-form-item
                              label="工程规划编号"
                              label-align="center"
                              :labelCol="{ span: 6 }"
                              :wrapperCol="{ span: 12 }"
                              required
                            >
                              <a-input placeholder="请输入" value="GCGH-000033"/>
                            </a-form-item>
                          </a-col>
                          <a-col :span="8"><!------------第二列---------------->
                            <a-form-item
                              label="工程规划名称"
                              :labelCol="{ span: 6 }"
                              :wrapperCol="{ span: 12 }"
                              required
                            >
                              <a-input placeholder="请输入"  value="2024 年信创转型工程"/>
                            </a-form-item>
                          </a-col>
                          <a-col  :span="8">  <!----------第三列------------------>
                              <a-form-item
                              label="工程规划级别"
                              :labelCol="{ span: 6 }"
                              :wrapperCol="{ span: 12 }" 
                            > 
                             <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  中心级
                                </a-select-option>
                                <a-select-option value="2">
                                  研发部级
                                </a-select-option> 
                              </a-select> 
                            </a-form-item> 
                          </a-col> 
                        </a-row> 
                          <a-row :gutter="24"><!------------第2行---------------->
                          <a-col :span="8"><!------------第一列---------------->
                              <a-form-item
                              label="工程规划类型"
                              :labelCol="{ span: 6 }"
                              :wrapperCol="{ span: 12 }" 
                            > 
                             <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  技术类
                                </a-select-option>
                                <a-select-option value="2">
                                  管理类
                                </a-select-option> 
                              </a-select> 
                            </a-form-item> 
                          </a-col>
                          <a-col :span="8"><!------------第二列---------------->
                            <a-form-item
                              label="母工程规划编号"
                              :labelCol="{ span: 6 }"
                              :wrapperCol="{ span: 12 }" 
                            > 
                             <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  20223000023
                                </a-select-option>
                                <a-select-option value="2">
                                  20223000024
                                </a-select-option> 
                              </a-select> 
                            </a-form-item> 
                          </a-col>
                          <a-col  :span="8">  <!----------第三列------------------> 
                              <a-form-item  label="发布日期"  :labelCol="{span: 5}" :wrapperCol="{span: 12 }"  > 
                              <a-date-picker style="width: 100%" placeholder="请输入日期" />  
                              </a-form-item>   
                          </a-col> 
                        </a-row> 


                          <a-row :gutter="24"><!------------第3行---------------->
                          <a-col :span="8"><!------------第一列---------------->
                                <a-form-item  label="要求完成日期"    
                              :labelCol="{ span: 6 }"
                              :wrapperCol="{ span: 12 }"  > 
                              <a-date-picker style="width: 100%" placeholder="请输入日期" />  
                              </a-form-item>   
                          </a-col>
                          <a-col :span="8"><!------------第二列---------------->
                            <a-form-item
                              label="联系人"
                              :labelCol="{ span: 6 }"
                              :wrapperCol="{ span: 12 }" 
                            > 
                             <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  罗露露
                                </a-select-option>
                                <a-select-option value="2">
                                  邓洪文
                                </a-select-option> 
                              </a-select> 
                            </a-form-item> 
                          </a-col>
                          <a-col  :span="8">  <!----------第三列------------------>
                                <a-form-item
                              label="总行项目编号"
                              :labelCol="{ span: 6 }"
                              :wrapperCol="{ span: 12 }" 
                                > 
                             <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  2654584654646
                                </a-select-option>
                                <a-select-option value="2">
                                  1654584654
                                </a-select-option> 
                              </a-select> 
                            </a-form-item> 
                          </a-col> 
                        </a-row> 


                      <a-row :gutter="24"><!------------第4行---------------->
                          <a-col :span="8"><!------------第一列---------------->
                                <a-form-item  label="总行项目名称"    
                              :labelCol="{ span: 6}"
                              :wrapperCol="{ span: 12 }"  > 
                             
                             <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  2024 信创转型工程
                                </a-select-option>
                                <a-select-option value="2">
                                  2023 信创转型工程
                                </a-select-option> 
                              </a-select> 
                              </a-form-item>   
                          </a-col>
                          <a-col :span="8"><!------------第二列---------------->
                            <a-form-item
                              label="总行项目重要性"
                              :labelCol="{ span: 6}"
                              :wrapperCol="{ span: 12 }" 
                            > 
                             <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  一般
                                </a-select-option>
                                <a-select-option value="2">
                                  重要
                                </a-select-option> 
                              </a-select> 
                            </a-form-item> 
                          </a-col>
                          <a-col  :span="8">  <!----------第三列------------------>
                                <a-form-item
                              label="审批流程模板"
                              :labelCol="{ span: 6}"
                              :wrapperCol="{ span: 12 }" 
                                > 
                             <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  默认
                                </a-select-option>
                                <a-select-option value="2">
                                  关键审批流
                                </a-select-option> 
                              </a-select> 
                            </a-form-item> 
                          </a-col> 
                        </a-row> 



                      <a-row :gutter="24"><!------------第5行---------------->
                          <a-col :span="24"><!------------第一列---------------->
                              <a-form-item
                                  label="工程背景"
                                  :labelCol="{span: 2}"
                                  :wrapperCol="{span: 22}"
                                >
                                  <a-textarea rows="4" :placeholder="架构提升"/>
                                 </a-form-item> 
                          </a-col> 
                        </a-row> 



                      <a-row :gutter="24"><!------------第6行---------------->
                          <a-col :span="24"><!------------第一列---------------->
                              <a-form-item
                                  label="工程目标"
                                  :labelCol="{span: 2}"
                                  :wrapperCol="{span: 22}"
                                >
                                  <a-textarea rows="4" :placeholder="架构提升"/>
                                 </a-form-item> 
                          </a-col> 
                        </a-row> 


                      <a-row :gutter="24"><!------------第7行---------------->
                          <a-col :span="24"><!------------第一列---------------->
                              <a-form-item
                                  label="实现内容"
                                  :labelCol="{span: 2}"
                                  :wrapperCol="{span: 22}"
                                >
                                  <a-textarea rows="4" :placeholder="架构提升"/>
                                 </a-form-item> 
                          </a-col> 
                        </a-row> 

                <a-divider type="horizontal " /> 
                          <a-row> 
                                <a-col>附件 
                                  <a-button>上传</a-button> 
                                </a-col> 
                         </a-row> 
                          <a-row> 
                                <a-col> 
                                  <a-table :columns="newProjectcolumns" :data-source="newProjectDataSource" class="components-table-demo-nested">
                                  <a slot="operation" slot-scope="">操作</a> 
                                  <a slot="action"  href="javascript:;" style="margin-right:10px">删除</a> 
                                  </a-table>  
                                </a-col> 
                        </a-row> 

                <a-divider type="horizontal " /> 
                          <a-row> 
                                <a-col>团队成员 
                                  <a-button>添加</a-button> 
                                </a-col> 
                         </a-row> 
                          <a-row> 
                                <a-col> 
                                  <a-table :columns="teamcolumns" :data-source="teamtDataSource" class="components-table-demo-nested">
                                  <a slot="operation" slot-scope="">操作</a> 
                                  <a slot="action"  href="javascript:;" style="margin-right:10px">删除</a> 
                                  </a-table>  
                                </a-col> 
                        </a-row> 

                      </a-form>
                </a-form>   
                </a-modal> 


            <a-button>导入</a-button> 
            <a-button>导出</a-button> 
            <!-----------筛选按钮------------>  
               <a-popover  trigger="click"  arrowPointAtCenter autoAdjustOverflow   placement  ="bottom" :md="24" >
                <template slot="content">  
                <a-form layout="horizontal">
                  <div  >
                    <a-row >   <!-----------第一行------------>  
                      <a-col  :md="4" > <!-----------第一列------------>  
                        <a-form-item
                        label="工程规划名称"
                        :labelCol="{span: 12}"
                        :wrapperCol="{span: 12, offset: 0}"
                        >
                        <a-input placeholder="请输入" />
                        </a-form-item>
                      </a-col>
                      <a-col :md="4" ><!-----------第二列------------>  
                        <a-form-item
                        label="总行项目请输入"
                        :labelCol="{span: 12}"
                        :wrapperCol="{span: 12, offset: 0}"
                        >
                        <a-input placeholder="请输入" />
                        </a-form-item>
                      </a-col>
                      <a-col  :md="4" ><!-----------第三列------------>  
                        <a-form-item
                        label="规划部门"
                        :labelCol="{span: 12}"
                        :wrapperCol="{span: 12, offset: 0}"
                        >
                        <a-select  :placeholder="$ta('请选择')"   >
                        <a-select-option value="架构一部">架构一部</a-select-option>
                        <a-select-option value="架构二部">架构二部</a-select-option>
                        <a-select-option value="技术一部">技术一部</a-select-option>
                        <a-select-option value="技术二部">技术二部</a-select-option>
                        <a-select-option value="技术三部">技术三部</a-select-option>
                        <a-select-option value="技术四部">技术四部</a-select-option>
                        </a-select> 
                        </a-form-item> 
                       
                      </a-col>
                      <a-col  :md="2" ><!-----------第三列------------>   
                        <a-form-item label="牵头" :labelCol="{span: 10}"  :wrapperCol="{span: 6, offset: 0}" >
                           <a-checkbox  ></a-checkbox>    
                        </a-form-item>  
                      </a-col>
                      <a-col :md="4" ><!-----------第四列------------>  
                        <a-form-item label="研发部" :labelCol="{span: 6}"  :wrapperCol="{span: 18, offset: 0}" >
                        <a-select  :placeholder="$ta('请选择')"   >
                        <a-select-option value="系统一部">系统一部</a-select-option>
                        <a-select-option value="系统二部">系统二部</a-select-option>
                        <a-select-option value="珠海一部">珠海一部</a-select-option>
                        <a-select-option value="珠海二部">珠海二部</a-select-option>
                        <a-select-option value="珠海三部">珠海三部</a-select-option>
                        <a-select-option value="珠海四部">珠海四部</a-select-option>
                        </a-select>  
                        </a-form-item>  
                      </a-col>

                      
                      <a-col  :md="5" ><!-----------第五列------------>  
                        <a-form-item  label="完成时间"  :labelCol="{span: 8}" :wrapperCol="{span: 12, offset: 1}"  > 
                        <a-date-picker style="width: 100%" placeholder="请输入完成日期" />  
                        </a-form-item>   
                      </a-col> 
                    </a-row>




                  <a-row  > <!-----------第二行------------>  
                    <a-col :md="4"  >
                      <a-form-item
                      label="与我相关"
                      :labelCol="{span: 8}"
                      :wrapperCol="{span: 12, offset: 1}"
                      >
                      <a-select placeholder="请选择">
                      <a-select-option value="1">是</a-select-option>
                      <a-select-option value="2">否</a-select-option>
                      </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :md="6"  >
                        <a-form-item
                        label="风险异常"
                        :labelCol="{span: 5}"
                        :wrapperCol="{span: 12, offset: 1}"
                        >
                        <a-select placeholder="请选择">
                          <a-select-option value="yes">是</a-select-option>
                          <a-select-option value="no">否</a-select-option>
                        </a-select>
                        </a-form-item>  
                    </a-col>

                  <a-col :md="6"   > 
                      <a-form-item
                      label="标签"
                      :labelCol="{span: 5}"
                      :wrapperCol="{span: 12, offset: 1}"
                      >
                      <a-select placeholder="请选择">
                      <a-select-option value="1">关闭</a-select-option>
                      <a-select-option value="2">运行中</a-select-option>
                      </a-select>
                  </a-form-item>  

                  </a-col>   
                    <a-col :md="8"  >  
                      <a-form-item
                      label=""
                      :labelCol="{span: 5}"
                      :wrapperCol="{span: 12, offset: 1}"
                      >
                        <span style="float: right; margin-top: 3px;">
                        <a-button type="primary">查询</a-button>
                        <a-button style="margin-left: 8px">重置</a-button> 
                        </span>  

                  </a-form-item>  


                  </a-col>   
                  </a-row>
                  </div>
                </a-form> 
          </template>
        <a-button>筛选 ∨ </a-button> 
    </a-popover>

 
 
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div> 
    </a-card> 
 
<!-------顶部概要------------->
<a-row     :bordered="false"  >
  <a-col :span="16"      >   
    <!----------------步骤板块---------------------->
      <a-card :bordered="false" style="height: 100px;  " >
        <a-steps :current="5" progress-dot :direction="isMobile ? 'vertical' : 'horizontal'">
          <a-step title="新建"  subTitle="16" >
            <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
              <a-step-item link="/dashboard/workplace" title="新建" icon="dingding-o"/>
              <a-step-item title="2016-12-12 12:32"/> 
            </a-step-item-group>
          </a-step>
          <a-step title="已发布" subTitle="15">
            <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
              <a-step-item link="/form/step" title="已发布" icon="dingding-o" />
              <a-step-item link="/result/success" title="催一下" icon="bell"/>
            </a-step-item-group>
          </a-step> 
          <a-step title="规划拆分中" subTitle="34">
            <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
              <a-step-item link="/form/step" title="规划拆分中" icon="dingding-o" />
              <a-step-item link="/result/success" title="催一下" icon="bell"/>
            </a-step-item-group>
          </a-step> 
          <a-step title="任务拆分中" subTitle="12">
            <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
              <a-step-item link="/form/step" title="任务拆分中" icon="dingding-o" />
              <a-step-item link="/result/success" title="催一下" icon="bell"/>
            </a-step-item-group>
          </a-step> 
          <a-step title="落地中" subTitle="12">
            <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
              <a-step-item link="/form/step" title="落地中" icon="dingding-o" />
              <a-step-item link="/result/success" title="催一下" icon="bell"/>
            </a-step-item-group>
          </a-step> 
          <a-step title="已完成" subTitle="12">
            <a-step-item-group :align="isMobile ? 'left' : 'center'" slot="description">
              <a-step-item link="/form/step" title="已完成" icon="dingding-o" />
              <a-step-item link="/result/success" title="催一下" icon="bell"/>
            </a-step-item-group>
          </a-step>  
        </a-steps>    
      </a-card> 
  </a-col>  

  <a-col   :span="1"   >      
    <!----------------分隔符---------------------->
    <a-card :bordered="false"  >  
      <a-divider type="vertical" style="height: 52px;  " />
    </a-card> 
  </a-col>  


  <a-col   :span="7"  :bordered="false"  >  
    <a-card   :bordered="false" style="height: 100px;  "  >  
      <div style="display: flex; flex-wrap: wrap;">
        <head-info title="风险"    v-bind:content="mainData.risk"     class="sp1"   />  
        <head-info title="延期"    v-bind:content="mainData.delay"         />  
        <head-info title="任务完成"    v-bind:content="mainData.tasks"       /> 
        <head-info title="工作量（人月）"   v-bind:content="mainData.workload"    /> 
      </div> 
     </a-card> 
  </a-col>   
</a-row>  

  <div class="page-header-index-wide"   >
    <a-card :bordered="false"> 
      <a-tree
        :treeData="treeData"
      >
        <template slot="custom" slot-scope="item"  > 
        


  <div>
      <span :span="12"  @click="showDrawer">{{ item.title }}</span>  
    <a-drawer 
      title="工程规划信息"
      placement="right"
      :width="1200"
      :maskClosable="true"
      :closable="true"
      :visible="drawervisible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >

    <a-row     :bordered="false"  >
      <a-col :span="22"      >  <div>GCGH-000001 2024年信创转型工程</div> 
      </a-col> 
      <a-col :span="2"   style="font-align:right ">  
        <label style="right:10px; margin-right: 1px; "> 复制  </label>  
        <label style="right:10px; margin-right: 1px; "> 作废  </label>  
      </a-col> 
    </a-row> 

    
    <a-divider type="horizontal " />
    <div>
      
      从创新计划、产品项目、业务需求、研发测试、版本投产、业务投产、推广运营等全流程信息的端到端的拉通和可视化，跨机构各角色基于需求项、需求条目、需求子条目和研发任务的状态以及关联的风
险、事件、问题等提示，实时链接对应工作项开展沟通协作，通过价值交付看板的支撑，协作工作对象高度聚焦，协作上下文清晰可见，减少线下沟通需求，提高协作效率。

</div>   <a-divider type="horizontal " />
     <div>
    <a-tabs default-active-key="1"  >
      <a-tab-pane key="1" tab="概览"> 
          <a-row     :bordered="false"  style="margin:10px" >
            <a-col :span="8"      >  <div>工程规划级别 : 研发部级</div>   </a-col> 
            <a-col :span="8"      >  <div>工程规划类型 : 工程管理</div>  </a-col> 
            <a-col :span="8"      >  <div>发布日期 : 2024-01-01</div>  </a-col> 
          </a-row> 
          <a-row     :bordered="false"   style="margin:10px"  >
            <a-col :span="8"      >  <div>要求完成日期 : 2025-01-01</div>   </a-col> 
            <a-col :span="8"      >  <div>登记部门 :系统二部</div>  </a-col> 
            <a-col :span="8"      >  <div>登记人 : 张三(555105933)</div>  </a-col> 
          </a-row> 
          <a-row     :bordered="false"   style="margin:10px"  >
            <a-col :span="8"      >  <div>业务系统/技术体系 : 技术类</div>   </a-col> 
            <a-col :span="8"      >  <div>中心牵头部门 : 系统二部</div>  </a-col> 
            <a-col :span="8"      >  <div>中心牵头部门联系人 : 张三(555105933)</div>  </a-col> 
          </a-row> 
          <a-row     :bordered="false"   style="margin:10px"  >
            <a-col :span="8"      >  <div>母工程规划编号 : 无</div>   </a-col> 
            <a-col :span="8"      >  <div>总行项目编号 : KJ202401221-H03</div>  </a-col> 
            <a-col :span="8"      >  <div>总行项目名称 : 工程规划管理管理</div>  </a-col> 
          </a-row> 
          <a-row     :bordered="false"   style="margin:10px"  >
            <a-col :span="8"      >  <div>总行项目重要性 :重要</div>   </a-col> 
            <a-col :span="8"      >  <div>审批流程模板 : 通用审批模板</div>  </a-col> 
            <a-col :span="8"      >  <div>工程规划备注 ：-</div>  </a-col> 
          </a-row> 

   <a-divider type="horizontal " />

    <a-row style="margin-top: 0" :gutter="[24, 24]">
        <a-col :sm="24" :md="12" :xl="6"   title="工程规划完成进度" > 
            <a-progress :percent="80" style="width: 180px" />
        <chart-card :loading="false" total="">   
            <a-row><a-col>规划任务完成   134137/2398849</a-col></a-row>
            <a-row><a-col>涉及应用/服务群组    98849</a-col></a-row>
            <a-row><a-col>应用完成   2333</a-col></a-row>
            <a-row><a-col>工作量（人月）   876</a-col></a-row>  
          <div> 
               
          </div>         
        </chart-card> 
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">      
        <chart-card :loading="loading" title="规划任务比例" total="345">
          <a-tooltip :title="$t('introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar />
          </div>
          <div slot="footer">{{$t('conversion')}} <span>60%</span></div>
        </chart-card> 
      </a-col>
    </a-row> 



      </a-tab-pane>
      <a-tab-pane key="2" tab="工程阶段"  >
        
        <a-card style="margin-top: 24px" :bordered="false" >        
          <div slot="extra"> 
            <a-button type="primary">新增</a-button>
            <a-button>导出</a-button> 
            <a-button>导入</a-button> 
            <a-button>发起拆分</a-button>  
              <a-input-search style="margin-left: 16px; width: 272px;" placeholder="请输入"/>
            <a-button type="primary">筛选 ∨ </a-button>
          </div>   
        </a-card >
  

            <a-table :columns="columns4" :data-source="data4" class="components-table-demo-nested">
                <a slot="operation" slot-scope="">Publish</a>
                  <a slot="action"  href="javascript:;" style="margin-right:10px">发起待办</a>    
                  <a slot="action"  href="javascript:;" style="margin-right:10px">删除</a>
                    <a-table
                    slot="expandedRowRender"
                    slot-scope=""
                    :columns="innerColumns4"
                    :scroll="{x:'max-content'}"
                    :data-source="innerData4"
                    :pagination="true"
                    >
                    </a-table>
            </a-table> 
 
      </a-tab-pane>



      <a-tab-pane key="3" tab="调查反馈">
        
        
 
        <a-card style="margin-top: 24px" :bordered="false" >        
          <div slot="extra"> 
            <a-button type="primary" @click="showAddModal">新增</a-button>
            <my-modal
              :visible="modalVisible"
              :width="1200"
              :title="'新增'"
              :zIndex="modalZIndex"
              :footer="null"
              @update:visible="modalVisible = $event"
            >
              <add-survey-form @finish="modalVisible = $event"/>
            </my-modal>
            <a-button>导出</a-button> 
            <a-button>导入</a-button>  
              <a-input-search style="margin-left: 16px; width: 272px;" placeholder="请输入"/>
            <a-select
              default-value="筛选"
              style="width: 72px" 
            >
              <a-select-option value="1"> 筛选 </a-select-option>
            </a-select>
          </div>   
        </a-card >
   
            <a-table :columns="columns5" :data-source="data5" class="components-table-demo-nested">
                <a slot="operation" slot-scope="">Publish</a>
                  <a slot="action"  href="javascript:;" style="margin-right:10px">修改</a>    
                  <a slot="action"  href="javascript:;" style="margin-right:10px">删除</a>
            
            </a-table> 

  


      </a-tab-pane>
      <a-tab-pane key="4" tab="风险"> 
        <a-card style="margin-top: 24px" :bordered="false" >        
          <div slot="extra">  

            <a-button type="primary" @click="addRiskShowModal">
                  新增风险
                </a-button>
                   <my-modal
                  :visible="addRisk_visible" 
                  :maskClosable=true
                  :z-index="1000000"
                  :width="1100"
                  :title="'新增风险'"  
                  @cancel="addRisk_handleCancel"
                  @ok    ="addRisk_handleCancel"
                    >
                      <a-form :colon="false">
                        <a-row :gutter="24">
                          <a-col :span="12">
                            <a-form-item
                              label="规划任务编号"
                              label-align="center"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <a-input placeholder="请输入" />
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="规划任务名称"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <a-input placeholder="请输入" />
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="风险处理人"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <!-- 需要调接口获取对应处理人列表，用mock模拟 -->
                              <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  Option 1
                                </a-select-option>
                                <a-select-option value="2">
                                  Option 2
                                </a-select-option>
                                <a-select-option value="3">
                                  Option 3
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="计划解决时间"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <a-date-picker style="width: 100%" />
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="版本"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                            >
                              <!-- 需要调接口获取对应处理人列表，用mock模拟 -->
                              <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  Option 1
                                </a-select-option>
                                <a-select-option value="2">
                                  Option 2
                                </a-select-option>
                                <a-select-option value="3">
                                  Option 3
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="需求项"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                            >
                              <!-- 需要调接口获取对应处理人列表，用mock模拟 -->
                              <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  Option 1
                                </a-select-option>
                                <a-select-option value="2">
                                  Option 2
                                </a-select-option>
                                <a-select-option value="3">
                                  Option 3
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="风险类型"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <!-- 需要调接口获取对应处理人列表，用mock模拟 -->
                              <a-select placeholder="请选择">
                                <a-select-option
                                  v-for="option in typeOptions"
                                  :key="option.value"
                                  :value="option.value"
                                >
                                  {{ option.label }}
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="24">
                            <a-form-item
                              label="风险描述"
                              :labelCol="{ span: 2 }"
                              :wrapperCol="{ span: 21 }"
                              required
                            >
                              <a-textarea
                                placeholder="请输入"
                                allow-clear
                                :rows="4" 
                              />
                            </a-form-item>
                          </a-col>
                          <a-col :span="24">
                            <a-form-item
                              label="风险决策"
                              :labelCol="{ span: 2 }"
                              :wrapperCol="{ span: 21 }"
                              required
                            >
                              <a-textarea
                                placeholder="请输入"
                                allow-clear
                                :rows="4" 
                              />
                            </a-form-item>
                          </a-col>
                        </a-row>
                      </a-form>
                    </my-modal>


            <a-button>导出</a-button> 
            <a-button>导入</a-button>  
            <a-input-search style="margin-left: 16px; width: 272px;" placeholder="请输入"/>
            <a-button type="primary">筛选 ∨ </a-button>
          </div>   
        </a-card > 
            <a-table :columns="columns6" :data-source="data6" class="components-table-demo-nested"> 
            </a-table>  
      </a-tab-pane>
















      <a-tab-pane key="5" tab="通知公告"> 
            <a-card :bordered="false">
              
              
        <detail-list title="" size="small" :col="1">
          <detail-list-item term="">业务需求书模版这里是公告标题的名称</detail-list-item>
          <detail-list-item term="">由于x0a要求，发布了业务需求书模版，请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载时件那下载需要的模版，谢谢大家配合!!(2022050)</detail-list-item>
          <detail-list-item term="">
                  <a-row span="24">
                    <a-col span="6">发布时间：:2023-12-22  09:20:10
                    </a-col>
                    <a-col span="6">发布人:王杨/产品研发处/总行个人金融部
                    </a-col>
                    <a-col span="6">最后修改人:王杨/产品研发处/总行个人金融部
                    </a-col>
                    <a-col span="6">最后修改时间:2023-12-23 10:22:21
                    </a-col>
                  </a-row>  
          </detail-list-item>
        </detail-list>
              <a-divider style="margin-bottom: 32px"/> 
     
              
        <detail-list title="" size="small" :col="1">
          <detail-list-item term="">业务需求书模版这里是公告标题的名称</detail-list-item>
          <detail-list-item term="">由于x0a要求，发布了业务需求书模版，请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载时件那下载需要的模版，谢谢大家配合!!(2022050)</detail-list-item>
          <detail-list-item term="">
                  <a-row span="24">
                    <a-col span="6">发布时间：:2023-12-22  09:20:10
                    </a-col>
                    <a-col span="6">发布人:王杨/产品研发处/总行个人金融部
                    </a-col>
                    <a-col span="6">最后修改人:王杨/产品研发处/总行个人金融部
                    </a-col>
                    <a-col span="6">最后修改时间:2023-12-23 10:22:21
                    </a-col>
                  </a-row>  
          </detail-list-item>
        </detail-list>
              <a-divider style="margin-bottom: 32px"/>      
              
        <detail-list title="" size="small" :col="1">
          <detail-list-item term="">业务需求书模版这里是公告标题的名称</detail-list-item>
          <detail-list-item term="">由于x0a要求，发布了业务需求书模版，请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载附件那下载需要的模版，谢谢大家配合!!请自行在下载时件那下载需要的模版，谢谢大家配合!!(2022050)</detail-list-item>
          <detail-list-item term="">
                  <a-row span="24">
                    <a-col span="6">发布时间：:2023-12-22  09:20:10
                    </a-col>
                    <a-col span="6">发布人:王杨/产品研发处/总行个人金融部
                    </a-col>
                    <a-col span="6">最后修改人:王杨/产品研发处/总行个人金融部
                    </a-col>
                    <a-col span="6">最后修改时间:2023-12-23 10:22:21
                    </a-col>
                  </a-row>  
          </detail-list-item>
        </detail-list>
              <a-divider style="margin-bottom: 32px"/> 







            </a-card> 
   
      </a-tab-pane>
      <a-tab-pane key="6" tab="团队成员">
        Content of Tab Pane 3团队成员
      </a-tab-pane>








      <a-tab-pane key="7" tab="附件">
        
        <a-card style="margin-top: 24px" :bordered="false" >        
          <div slot="extra"> 
            <a-button type="primary">上传</a-button>
            <a-button>下载</a-button>  
              <a-input-search style="margin-left: 16px; width: 272px;" placeholder="请输入"/>
            <a-button type="primary">筛选 ∨ </a-button>
          </div>   
        </a-card > 
            <a-table :columns="columns7" :data-source="data7" class="components-table-demo-nested"> 
              
                  <a slot="action"  href="javascript:;" style="margin-right:10px">下载</a>    
                  <a slot="action"  href="javascript:;" style="margin-right:10px">删除</a>
            </a-table> 
      </a-tab-pane>
    </a-tabs>
  </div>
    </a-drawer>
  </div>











          <span :span="12"  type="primary"  class="but_type"  style="right:20px;" > 
              <label  >    
                  <template>
                    <a-popover title="查看风险详情">
                      <template slot="content">
                        <p>
                            <a-table
                            row-key="id"
                            style="margin-bottom: 24px"
                            :columns="riskColumns"
                            :dataSource="riskDataSource"
                            :pagination="false"
                          >
                          </a-table>
                        </p> 
                      </template>
                      <a-icon  type="exclamation-circle" /> 风险 {{ item.riskNum }}   
                    </a-popover>
                  </template> 
              </label> 
              
              
              
              
              
              <a-divider type="vertical" style="height: 22px;  " />
              <label style="right:10px;"><a-icon  type="copy" /> 调查反馈  {{ item.investigation }}</label>  <a-divider type="vertical" style="height: 22px;  " />
              <label style="right:10px;"><a-icon  type="book" />任务{{ item.task }}</label>  <a-divider type="vertical" style="height: 22px;  " />
              <label style="right:10px;"><a-icon  type="edit" />工作量 (人月){{ item.workload }}</label>  <a-divider type="vertical" style="height: 22px;  " /> 
               


                          <!-----------筛选按钮------------>
            <a-dropdown>
              <label style="right:10px;"><a-icon  type="tool" /></label> 
              <template #overlay>
                <a-menu @click="handleMenuClick">
                <a-menu-item key="1"><UserOutlined />规划拆分</a-menu-item>
                <a-menu-item key="2"><UserOutlined />新增调查</a-menu-item>
                <a-menu-item key="3"><UserOutlined />风险</a-menu-item>
                <a-menu-item key="4"><UserOutlined />复制</a-menu-item>
                <a-menu-item key="5"><UserOutlined />作废</a-menu-item>
                </a-menu>      
              </template>
            </a-dropdown> 



          </span>
        </template>
      </a-tree>
    </a-card>
  </div>


  </page-layout>  




 </div>
 
</template>
  

 <script>
import HeadInfo from '../../../components/tool/HeadInfo';  
import ChartCard from '../../../components/card/ChartCard' 
import MiniArea from '../../../components/chart/MiniArea'
import MiniBar from '../../../components/chart/MiniBar'
import MiniProgress from '../../../components/chart/MiniProgress'
import Bar from '../../../components/chart/Bar'
import RankingList from '../../../components/chart/RankingList'
import HotSearch from './HotSearch'
import SalesData from '../项目/SalesData'
import Trend from '../../../components/chart/Trend' 
import DetailList from '../../../components/tool/DetailList'
import PageLayout from '../../../layouts/PageLayout'
import AddSurveyForm from '../../addSurveyModal/AddSurveyForm'

// 自定义组件
import MyModal from "../../../components/modal/MyModal";

import {  typeOptions } from "../../../pages/projectManagement/index";
const DetailListItem = DetailList.Item
const rankList = []

for (let i = 0; i < 8; i++) {
  rankList.push({
    name: '桃源村' + i + '号店',
    total: 1234.56 - i * 100
  })
}


export default {
  name: 'Analysis',
  components: {HeadInfo, MiniBar,   ChartCard,DetailList,DetailListItem,PageLayout, MyModal, AddSurveyForm}, 
  i18n: require('./i18n'), 


  data() {
    return {
      treeData,mainData,riskDataSource,riskColumns,drawervisible,
      Trend, SalesData, HotSearch, RankingList, Bar, MiniProgress, MiniBar, 
      MiniArea, ChartCard,      rankList,         loading :true,
       columns2,dataSource2,
      dataSource3,
      columns3,
      data4,      columns4,      innerColumns4,      innerData4,
      data5,      columns5,     
      data6,columns6, 
      data7,columns7,
      n_visible: false,
      n_confirmLoading: false,
      // 抽屉和弹窗的高度
      modalZIndex: 1001, // 确保这个值高于Drawer的z-index
      addRisk_visible:false, 
      // 调查反馈-新增
       modalVisible: false,
       typeOptions, newProjectcolumns,newProjectDataSource,
       teamcolumns,teamtDataSource,
       newprojectmodal1Visible,//新建工程弹框成功
    }
  },



  created() {
    setTimeout(() => this.loading = !this.loading, 1000)
  }, 


  methods: { 

////////////////////////添加新的工程
    n_showModal() {
      this.n_visible = true;
      console.log('打开了新窗口');
    },
    n_handleOk() {  
      // this.$message.info('点击了确定');
      this.n_confirmLoading = true;
      this.n_visible = false;
      console.log('点击了确定按钮');
      this.newprojectmodal1Visible = true; 
 
    },
    setModal1Visible() {
      console.log('点击了取消按钮');
      this.newprojectmodal1Visible = false;
    }, 



////////////////////////添加新的风险
    addRiskShowModal() {
      this.addRisk_visible = true;
      console.log('打开了新增风险窗口');
    }, 
    addRisk_handleCancel() {
      console.log('点击了新增风险，取消按钮');
      this.addRisk_visible = false;
      console.log('新增风险的弹框，已经关闭');
    }, 

 

      //工程规划详情，点击后展现右侧的抽屉
      afterVisibleChange(drawervisible) {
            console.log('visible', drawervisible);
       // this.visible = !this.visible ;
          },
      showDrawer() {
        this.drawervisible = true; 
    //  this.$message.info('显示抽屉和遮罩'); 
      },
      onClose() {
     // this.$message.info('点击了关闭抽屉'); 
        this.drawervisible = false;
      },



    // 递归查找
    searchOption (option, arr, type = 'delect') {
      console.log(option, arr)
      for (let s = 0; s < arr.length; s++) {
        console.log(arr[s].key, option.key)
        if (arr[s].key === option.key) {
          if (type === 'delect') {
            arr.splice(s, 1)
          } else {
          //这是模拟数据编辑数据
            this.$set(arr, s, {
              title: '测试标题',
              key: '12121212',
              scopedSlots: { title: 'custom' }
            })
          }
          break
        } else if (arr[s].children && arr[s].children.length > 0) { // 递归条件
          this.searchOption(option, arr[s].children)
        } else {
          continue
        }
      }
    },
    append (data) {
    //模拟添加
      const newChild = { title: '新工程',
        key: '新工程key',
        scopedSlots: { title: 'custom' },
        children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },
    remove (data) { 
      this.searchOption(data, this.treeData)
    },
    edit (data) { 
      this.searchOption(data, this.treeData, 'edit')
    },

    // 调查反馈-新增弹窗
    showAddModal() {
      this.modalVisible = true;
      console.log(111);
    },
  }


} 

const columns3 = [
  { title: '阶段名称', dataIndex: 'name', key: 'name' },
  { title: '阶段内容', dataIndex: 'age', key: 'statgeContent' },
  { title: '拆分类型', dataIndex: 'address', key: 'chaifenleixing' },
  { title: '阶段层数', dataIndex: '', key: 'chaifencengshu' },
  { title: '颗粒度', dataIndex: '', key: 'kelidu'},
  { title: '牵头角色', dataIndex: '', key: 'qiantoujuese'},
  { title: '状态', dataIndex: '', key: 'status'},
  { title: '数量', dataIndex: '', key: 'amount'},
  { title: '操作', dataIndex: '', key: 'operation', scopedSlots: { customRender: 'action' } },
];


let newprojectmodal1Visible = false;
//////////////////////////////////////

const columns4 = [
  { title: '阶段名称', dataIndex: 'name', key: 'name' },
  { title: '阶段内容', dataIndex: 'age', key: 'statgeContent' },
  { title: '拆分类型', dataIndex: 'address', key: 'chaifenleixing' },
  { title: '阶段层数', dataIndex: '', key: 'chaifencengshu' },
  { title: '颗粒度', dataIndex: '', key: 'kelidu'},
  { title: '牵头角色', dataIndex: '', key: 'qiantoujuese'},
  { title: '状态', dataIndex: '', key: 'status'},
  { title: '数量', dataIndex: '', key: 'amount'},
  { title: '操作', dataIndex: '', key: 'operation', scopedSlots: { customRender: 'action' } },
];

const data4 = [
 {
    key: 1,
    name:"数据库转型评估",
    statgeContent: '通过对Oracle转型数据库相关信息的收集和评审，提出数据库转型规划建议。',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '1',
    operation: '删除',
    description:"xxxx"
  },
  {
    key: 2,
    name:"转型方案征求意见",
    statgeContent: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合.',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '0',
    operation: '删除',
    description:"xxxx"
  },
  {
    
    key: 3,
    name:"转型方案基地评审",
    statgeContent: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合.',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '1',
    operation: '删除',
    description:"xxxx"
  },
  {
    
    key: 4,
    name:"方案联席评审",
    statgeContent: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合.',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '1',
    operation: '删除',
    description:"xxxx"
  },
  {
    
    key: 5,
    name:" 对象迁移报告",
    statgeContent: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合.',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '1',
    operation: '删除',
    description:"xxxx"
  },


];

///////////////////新增工程表格//////////////////////////


const newProjectcolumns = [
  { title: '文档名称', dataIndex: 'name', key: 'name' },
  { title: '提交人', dataIndex: 'ren', key: 'ren' },
  { title: '提交时间', dataIndex: 'tijiaosj', key: 'tijiaosj' }, 
  { title: '操作', dataIndex: '', key: 'operation', scopedSlots: { customRender: 'action' } },
];

const newProjectDataSource = [
 {
    key: 1,
    name:"关键交付物模板.docx",
    ren: '王爽',
    tijiaosj: "2024-9-7", 
  },
  {
    key: 2,
    name:"工程项目模板.docx",
    ren: '尚嘉力',
    tijiaosj: "2024-9-7", 
  }
];

//////////////////团队成员//////////////////// 

const teamcolumns = [
  { title: '人员', dataIndex: 'ry', key: 'ry' },
  { title: '统一认证号', dataIndex: 'tyrjh', key: 'tyrjh' },
  { title: '角色', dataIndex: 'js', key: 'js' }, 
  { title: '直属领导', dataIndex: 'zsld', key: 'zsld' }, 
  { title: '负责内容', dataIndex: 'fznr', key: 'fznr' }, 
  { title: '联系电话', dataIndex: 'lxdh', key: 'lxdh' }, 
  { title: '操作', dataIndex: '', key: 'operation', scopedSlots: { customRender: 'action' } },
];

const teamtDataSource = [
 {
    key: 1,
    ry:"王爽",
    js:"架构师",
    tyrjh: '001638511',
    zsld: "古建新", 
    fznr:"大资产管理",
    jfznrs: "大资产、一号文、子公司架构支持", 
    lxdh: "18143022068",  
  }, {
    key: 2,
    ry:"古建新",
    js:"架构师",
    tyrjh: '004950010',
    zsld: "古建新", 
    fznr:"大资产管理",
    jfznrs: "大资产、一号文、子公司架构支持", 
    lxdh: "18143022068",  
  },
  {
    key: 3,
    ry:"尚嘉力",
    js:"架构师",
    tyrjh: '00163851331',
    fznr:"大零售管理",
    zsld: "张志", 
    jfznrs: "零售业务大零售", 
    lxdh: "18698989884",  
  }
];







//////////////////附件////////////////////

const columns7 = [
  { title: '文档名称', dataIndex: 'wdmc', key: 'wdmc' },
  { title: '所属工程规划', dataIndex: 'ssgcgh', key: 'ssgcgh' },
  { title: '提交人', dataIndex: 'tjr', key: 'tjr' },
  { title: '提交时间', dataIndex: 'tjsj', key: 'tjsj' },
  { title: '最近修改人', dataIndex: 'zjxgr', key: 'zjxgr'},
  { title: '最近修改日期', dataIndex: 'zjxgrq', key: 'zjxgrq'},  
  { title: '操作', dataIndex: '', key: 'operation', scopedSlots: { customRender: 'action' } },
];

const data7 = [
 {
    key: 1,
    wdmc:"工程规划关键阶段清单.xlsx",
    ssgcgh: '2024 年信创转型工程',
    tjr: "张三",
    tjsj: '2024-01-01',
    zjxgr: '张三',
    zjxgrq: '2024-01-01',  
  },
  {
    key: 1,
    wdmc:"工程规划详情介绍.ppt",
    ssgcgh: '2024 年信创转型工程',
    tjr: "张三",
    tjsj: '2024-01-01',
    zjxgr: '张三',
    zjxgrq: '2024-01-01',  
  },
  {
    key: 1,
    wdmc:"工程规划计划内容.xlsx",
    ssgcgh: '2024 年信创转型工程',
    tjr: "张三",
    tjsj: '2024-01-01',
    zjxgr: '张三',
    zjxgrq: '2024-01-01',  
  } 

];

const innerColumns4 = [
  { title: '事项', dataIndex: 'm1', key: 'm1' },
  { title: '详细', dataIndex: 'm2', key: 'm2' } 
];

const innerData4 = [
  { m1: '拆分原则', 
  m2: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合完成相关工作。'
   },
  { m1: '应用侧输入物', 
  m2: '《Oracle使用现状信息收集》'
   },
  { m1: '详细描述', 
  m2: '1、应用负责人完成战路解码任务中"数据库转型评估"工作，反馈数据库相美信息，线上填报《Oradle使用现状信息收集》文档。</br>2、各研发部技术部产品部部门组织属地应用研发团队对以上《Orace使用现状信急收集》文档进行评审，各应用负责人在完成平审后，将评审的建议和结论要点登记在《0racie使用现状信息收集》表，填报Y-AA列，将评审状态置为“已完成。</br>3/3、应用负责人需整理Oracle数据库的TOP SQL，并在"工序5"中结合GaUssDB的执行情况进行比对。</br>4、同步更新战略解码任务表，“是否完成^状态为“是” '
   },
  { m1: '资源评估必填', 
  m2: '灾备等级、了路服务器、CPU峰值使用率，部署架构(RAC/单库)、教据库仟传容量最大活跃会话数(如为RAC，输出每个节点会话数及汇总和)最人在线合话数(如0为RAC 输出每人节点会话数及汇总和)、最大每日归档量、存过总行数，行数T0P10存过清单、分区表数量，数据复制秦号!维护资源评估必填:最大分区数、单表最大行数、单表最大数据量、表总数量、无主健表数量、字段数超过200的完表、单个LOB字段最大容量topsqI要求:CPU TIME TOP100的SQL语句，大于500毫秒，高频SQL、对客业务sQL。'
   },
  { m1: '输出物', 
  m2: '《Oracle使用现状信息收集》.xlsx</br>《oracle较型数据库信息收集》.xlsx'
   },
  ]; 













////////////////////调查反馈tab也的数据///////////////////////



const columns5 = [
  { title: '调查名称', dataIndex: 'name', key: 'name' },
  { title: '发起人', dataIndex: 'faqiren', key: 'faqiren' },
  { title: '调查描述', dataIndex: 'diaochamiaoshu', key: 'diaochamiaoshu' },
  { title: '当前状态', dataIndex: 'dangqianzhuangtai', key: 'dangqianzhuangtai' },
  { title: '已反馈', dataIndex: 'yifankui', key: 'yifankui'},
  { title: '要求完成时间', dataIndex: 'yaoqiuwanchengshijian', key: 'yaoqiuwanchengshijian'}, 
  { title: '操作', dataIndex: '', key: 'operation', scopedSlots: { customRender: 'action' } },
];

const data5 = [ 
  {
    key: 1,
    name:"2024 年信创转型工程涉及应用清单",
    faqiren: '罗露露',
    diaochamiaoshu: "收集软件开发中心下的所有应用是否涉及该工程规划内容",
    dangqianzhuangtai: '进行中',
    yifankui: '230/240',
    yaoqiuwanchengshijian: '业务经理', 
    operation: '删除', 
  }, 


];
   

/////////////////////////////////////////////


const dataSource3 = [
  {
    key: 1,
    name:"数据库转型评估",
    statgeContent: '通过对Oracle转型数据库相关信息的收集和评审，提出数据库转型规划建议。',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '1',
    operation: '删除',
    description:"xxxx"
  },
  {
    key: 2,
    name:"转型方案征求意见",
    statgeContent: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合.',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '0',
    operation: '删除',
    description:"xxxx"
  },
  {
    
    key: 3,
    name:"转型方案基地评审",
    statgeContent: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合.',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '1',
    operation: '删除',
    description:"xxxx"
  },
  {
    
    key: 4,
    name:"方案联席评审",
    statgeContent: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合.',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '1',
    operation: '删除',
    description:"xxxx"
  },
  {
    
    key: 5,
    name:" 对象迁移报告",
    statgeContent: '各研发部奉头的平合化开发应用，由奉头部门组织各配合本部门一起开展，非牵头应用则配合.',
    chaifenleixing: "规划拆分",
    chaifencengshu: '1',
    kelidu: '按场景 ',
    qiantoujuese: '业务经理',
    status: '规划拆分中',
    amount: '1',
    operation: '删除',
    description:"xxxx"
  },
];



let drawervisible = false;
let riskDataSource = [
    {
      id:'1',
      app: 'F-ALDM',
      depart: '系统二部',
      riskDesc:'收集软件开发中心下的所有应用是否涉及该工程规划的内容',
      riskDecission: "风险决策点",
      riskDealer: '罗露露'
    }, {
      id:'2',
      app: 'F-ALDM',
      depart: '系统二部',
      riskDesc:'所有涉及点是否已经登记',
      riskDecission: "风险决策点",
      riskDealer: '罗露露'
    }, {
      id:'3',
      app: 'F-ALDM',
      depart: '系统二部',
      riskDesc:'所有涉及点是否已经有处理预案',
      riskDecission: "风险决策点",
      riskDealer: '李艳'
    }, {
      id:'4',
      app: 'F-ALDM',
      depart: '系统二部',
      riskDesc:'风险责任明确',
      riskDecission: "风险决策点",
      riskDealer: '求伯君'
    }
]



let riskColumns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '应用',
    dataIndex: 'app',
    key: 'app'
  },
  {
    title: '部门',
    dataIndex: 'depart',
    key: 'depart'
  },
  {
    title: '风险描述',
    dataIndex: 'riskDesc',
    key: 'riskDesc'
  },
  {
    title: '风险决策点',
    dataIndex: 'riskDecission',
    key: 'riskDecission',
    align: 'right'
  },
  {
    title: '当前处理人',
    dataIndex: 'riskDealer',
    key: 'riskDealer',
    align: 'right'
  } 
]

let columns2 = [
  {
    title: '工程阶段',
    dataIndex: 'stage'
  },
  {
    title: '工作内容',
    dataIndex: 'description', 
  },
  {
    title: '是否必须',
    dataIndex: 'must', 
  },
  {
    title: '阶级层数',
    dataIndex: 'stageNum', 
  },
  {
    title: '颗粒度',
    dataIndex: 'lidu', 
  },
  {
    title: '解码成员',
    dataIndex: 'member',
  },
  {
    title: '解码状态',
    dataIndex: 'status',
  },
  {
    title: '解码数量',
    dataIndex: 'number',
  },
  {
    title: '操作',
    dataIndex: 'operate',
  }
]

let dataSource2 = [    ]

let  mainData={ risk: 7,delay:1,tasks:"39%",workload:1203000 }

let treeData = [ {
        title: '2024年信创转型',
        key: '0-0-0', riskNum:17, workload:236,investigation:"233/122",task:"343/2393",
        scopedSlots: { title: 'custom' },
        children: [
          { title: '人行任务',         key: '0-0-0-0', riskNum:8, workload:23, investigation:"233/142",task:"335/2363",scopedSlots: { title: 'custom' } },
          { title: '存量应用群组全栈转型', key: '0-0-0-1',  riskNum:3, workload:39, investigation:"23/142",task:"396/233",scopedSlots: { title: 'custom' } },
          { title: 'Oracle数据库转型', key: '0-0-0-2',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: '传统操作系统转型（AIX、Centos、Redhat）', key: '0-0-0-3',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
        ]
      }, {
        title: '重点战略',
        key: '0-0-5', riskNum:17, workload:236,investigation:"233/122",task:"343/2393",
        scopedSlots: { title: 'custom' },
        children: [
          { title: '第一个人金融银行',         key: '0-0-5-0', riskNum:8, workload:23, investigation:"233/142",task:"335/2363",scopedSlots: { title: 'custom' } },
          { title: '外汇业务首选银行', key: '0-0-5-1',  riskNum:3, workload:39, investigation:"23/142",task:"396/233",scopedSlots: { title: 'custom' } },
          { title: '城乡联动发展', key: '0-0-5-2',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: '京津冀区域', key: '0-0-5-3',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: '长三角区域', key: '0-0-5-4',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: '粤港澳区域', key: '0-0-5-5',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: '成渝区域', key: '0-0-5-6',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: '中部区域', key: '0-0-5-7',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: 'GBC联动', key: '0-0-5-8',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
        ]
      },
  {
    title: '2022年信创转型',
    key: '0-0', riskNum:23, workload:239,investigation:"233/122",task:"393/2393",
    scopedSlots: { title: 'custom' },
    children: [  {
        title: '2024年信创转型',
        key: '0-0-0', riskNum:17, workload:236,investigation:"233/122",task:"343/2393",
        scopedSlots: { title: 'custom' },
        children: [
          { title: '人行任务',         key: '0-0-0-0', riskNum:8, workload:23, investigation:"233/142",task:"335/2363",scopedSlots: { title: 'custom' } },
          { title: '存量应用群组全栈转型', key: '0-0-0-1',  riskNum:3, workload:39, investigation:"23/142",task:"396/233",scopedSlots: { title: 'custom' } },
          { title: 'Oracle数据库转型', key: '0-0-0-2',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: '传统操作系统转型（AIX、Centos、Redhat）', key: '0-0-0-2',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
        ]
      },
      {
        title: 'GCGH-000033 2024年信创转型工程  一期规划',
        key: '0-0-0', riskNum:17, workload:236,investigation:"233/122",task:"343/2393",
        scopedSlots: { title: 'custom' },
        children: [
          { title: '工程规划研讨会',         key: '0-0-0-0', riskNum:8, workload:23, investigation:"233/142",task:"335/2363",scopedSlots: { title: 'custom' } },
          { title: '工程规划工作说明书交付', key: '0-0-0-1',  riskNum:3, workload:39, investigation:"23/142",task:"396/233",scopedSlots: { title: 'custom' } },
          { title: '工程执行与监督', key: '0-0-0-2',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
          { title: '工程执行与监督', key: '0-0-0-2',  riskNum:8, workload:90, investigation:"23/1342",task:"333/2353",scopedSlots: { title: 'custom' } },
        ]
      },
      {
        title: 'GCGH-000033 2024年信创转型工程 二期规划',
        key: '0-0-1', riskNum:6, workload:36,investigation:"33/125",task:"3963/2393",
        scopedSlots: { title: 'custom' },
        children: [
          { title: '工程规划研讨会(已结束)', key: '0-0-1-0',  riskNum:19, workload:78,investigation:"233/1223",task:"395/2393",scopedSlots: { title: 'custom' } },
          { title: '工程规划工作说明书交付', key: '0-0-1-1',  riskNum:19, workload:23,investigation:"23/1242",task:"396/2693",scopedSlots: { title: 'custom' } },
          { title: '工程执行与监督', key: '0-0-1-2',  riskNum:19, workload:63,investigation:"233/1232",task:"393/2393",scopedSlots: { title: 'custom' } }
        ]
      },
      {
        title: 'GCGH-000033 2024年信创转型工程 三期规划',
        key: '0-0-2', riskNum:12, workload:67,investigation:"233/126",task:"393/2323",
        scopedSlots: { title: 'custom' }
      }
    ]
  },
  {
    title: 'GCGH-000001 2023年信创转型工程',
    key: '0-1', riskNum:11, workload:371,investigation:"233/125",task:"363/2393",
    scopedSlots: { title: 'custom' },
    children: [
      { title: 'GCGH-000001 2023年信创转型工程 一期规划', key: '0-1-0-0',  riskNum:19, workload:35,investigation:"233/12",task:"393/2393",scopedSlots: { title: 'custom' } },
      { title: 'GCGH-000001 2023年信创转型工程 二期规划', key: '0-1-0-1',  riskNum:546, workload:24,investigation:"233/127",task:"395/2393",scopedSlots: { title: 'custom' } },
      { title: 'GCGH-000001 2023年信创转型工程 三期规划', key: '0-1-0-2',  riskNum:33, workload:564,investigation:"234/1452",task:"343/2393",scopedSlots: { title: 'custom' } }
    ]
  },
  {
    title: 'GCGH-000024 境外下主机',
    key: '工作规划研讨', riskNum:19, workload:45 ,investigation:"233/142",task:"363/23233",
    scopedSlots: { title: 'custom' }
  }
]
 



////////////////////调查反馈tab也的数据///////////////////////


////////////////////////////////////风险tab页数据
const columns6 = [
  { title: '应用', dataIndex: 'yingyong', key: 'yingyong' },
  { title: '部门', dataIndex: 'bumen', key: 'bumen' },
  { title: '风险描述', dataIndex: 'fengxianmiaoshu', key: 'fengxianmiaoshu' },
  { title: '风险决策点', dataIndex: 'fengxianjuecedian', key: 'fengxianjuecedian' },
  { title: '当前处理人', dataIndex: 'dangqianchuliren', key: 'dangqianchuliren'}, 
];

const data6= [ 
  {
    key: 1,
    yingyong:"F-ALDM",
    bumen: '系统二部',
    fengxianmiaoshu: "收收集软件开发中心下所有应用是否涉及该工程规划的内容", 
    fengxianjuecedian: '存在个别应用涉及',
    dangqianchuliren: '张三【系统二部】（67968222）',  
  }, 

  {
    key: 2,
    yingyong:"F-ALDM",
    bumen: '系统二部',
    fengxianmiaoshu: "针对9月份版本提供规划内容", 
    fengxianjuecedian: '存在个别应用涉及',
    dangqianchuliren: '张三【系统二部】（67968222）',  
  }, 

  {
    key: 3,
    yingyong:"F-ALDM",
    bumen: '系统二部',
    fengxianmiaoshu: "针对10月份版本提供规划内容", 
    fengxianjuecedian: '存在个别应用涉及',
    dangqianchuliren: '张三【系统二部】（67968222）',  
  }, 

];
   

</script> 



<style lang="less" scoped>

.a-button {
  margin-right: 10px; /* 调整间距 */
}


.ant-tree-title {
  width: 100%;
  text-align:left;
}
.title {
  float: left;
} 
  
.ant-card-body {
  :global {
    .ant-tree {
      line-height: 3;
      li {
        position: relative;
      }
    }
  }
}
.ant-card-body .but_type {
  float: right;
  position: absolute;
  right: 40px;
}

.sp1 {
  font: red; 
}
 .extra-wrap{
    .extra-item{
      display: inline-block;
      margin-right: 24px;
      a:not(:first-child){
        margin-left: 24px;
      }
    }
  }
  @media screen and (max-width: 992px){
    .extra-wrap .extra-item{
      display: none;
    }
  }
  @media screen and (max-width: 576px){
    .extra-wrap{
      display: none;
    }
  }

</style>

